<template>
	<view class="container">
		<!-- animate.css使用案例，设置元素类名 -->
		<view class="title animate__animated animate__heartBeat">
			animation动画示例
		</view>
		<view class="title animate__animated animate__heartBeat">
			下面安逸也许不够完美 需自己美化样式
		</view>
		<view class="title animate__animated animate__heartBeat">
			整个项目不需要的页面直接删除
		</view>
		<u-cell-group>
			<u-cell icon="setting-fill" title="个人信息展示" :isLink="true" arrow-direction="right" @click="goInfo"></u-cell>
			<u-cell icon="chrome-circle-fill" title="z-paging使用" :isLink="true" arrow-direction="right" @click="goRecords"></u-cell>
			<u-cell icon="grid-fill" title="梯形选项卡" :isLink="true" arrow-direction="right" @click="goTiXing"></u-cell>
			<u-cell icon="github-circle-fill" title="打开头像昵称授权" :isLink="true" arrow-direction="right" @click="showdate=true"></u-cell>
			<u-cell icon="qzone" title="积分签到页面模板" :isLink="true" arrow-direction="right" @click="goSignIn"></u-cell>
			</u-cell>
		</u-cell-group>
		<OpendateWindow v-model="showdate" @send="getSonValue"></OpendateWindow>
	</view>
</template>

<script>
	import OpendateWindow from '@/components/opendate-Window/opendate-Window.vue'
	export default {
		components: {
			OpendateWindow
		},
		data() {
			return {
				showdate: false,
				userinfo:{},
			}
		},
		created() {

		},
		methods: {
			// 积分签到
			goSignIn(){
				uni.navigateTo({
					url:'/pagesFunc/sign'	
				})
			},
			// 获取头像昵称
			getSonValue(res) {
				this.userinfo = res;
				this.showdate = false;
				console.log('获取用户', this.userinfo)
			},
			// 个人信息
			goInfo() {
				uni.navigateTo({
					url:'/pagesFunc/personalSetting'
				})
			},
			// z-paging刷新使用
			goRecords() {
				uni.navigateTo({
					url: '/pagesFunc/records'
				})
			},
			// 梯形选项卡
			goTiXing(){
				uni.navigateTo({
					url:'/pagesFunc/ladderShapeTwo'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	// animate.css 动画执行设置示例
	.animate__heartBeat {
		animation-duration: 3000;
		animation-iteration-count: infinite;
	}
	.container {
		width: 100%;
		height: 100%;
		.title {
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
			 background-image: -webkit-linear-gradient(10deg,yellow,purple,red);
			-webkit-background-clip: text;
			color: transparent;
			&:nth-child(1){
				background-image: -webkit-linear-gradient(10deg,plum,pink,blue);
			}
			&:nth-child(2){
				background-image: -webkit-linear-gradient(10deg,#f60,#68a,#f92);
			}
		}
	}
</style>
